<template>
  <div class="device">
    <div class="common-table">
      <el-table :data="tableData" stripe style="width: 100%" height="100%" empty-text="请先选择设备">
        <el-table-column prop="deviceId" label="设备ID"> </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
        <el-table-column prop="state" label="运转状态">
          <template slot-scope="scope">
            <span>{{ deviceStatusType[scope.row.status] }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pager">
        <el-pagination layout="prev, pager, next" :total="total" @current-change="currentChange"> </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getDeviceStatusApi } from "@/api/deviceApi";
import dayjs from "dayjs";

const TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";

export default {
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      deviceStatusType: {
        0: "正常",
        1: "故障",
      },
      form: {
        time: "",
        message: "",
      },
      tableData: [],
      modalType: 0,
      pageData: {
        page: 1,
        limit: 1,
      },
      // 分页总数
      total: 0,
    };
  },
  watch: {
    id: {
      handler: "handleGetDeviceDetail",
      immediate: true,
    },
  },
  mounted() {
    // 获取单台设备信息
    this.handleGetDeviceDetail(this.id);
  },
  methods: {
    async handleGetDeviceDetail() {
      console.log(this.id, 111);
      if (this.id) {
        const list = await getDeviceStatusApi(this.id);
        console.log(list, "单台设备运行状态信息");
        if (list && list.length) {
          this.tableData = list.map((item) => {
            const date = dayjs(item.timestamp);
            const formattedDate = date.format(TIME_FORMAT);
            return {
              time: formattedDate,
              ...item,
            };
          });
          this.total = list.length;
        }
      } else {
        this.tableData = [];
        this.total = 0;
      }
    },
    // 改变页码
    currentChange(val) {
      this.pageData.page = val;
    },
  },
};
</script>

<style lang="less" scoped>
.device {
  height: 100%;

  .device-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-table {
    height: 90%;

    .pager {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-top: 10px;
      box-sizing: border-box;
    }
  }
}
</style>
